// src/routes/index.tsx
import React, { lazy, Suspense, FC, useState } from "react";
import { useRoutes, Navigate } from "react-router-dom";
import { HomeOutlined,AimOutlined } from "@ant-design/icons";
import type { SRoutes } from "./types";
import { store } from "@/app/store";



import {
  Layout,
  EmptyLayout,
  // CompLayout
} from "../layouts";
import Loading from "@comps/Loading";

import Translation from "@comps/Translation";
const Login = lazy(() => import("@pages/login"));
const Dashboard = lazy(() => import("@pages/dashboard"));
const NotFound = lazy(() => import("@pages/404"));
const Trademark = lazy(() => import("@/pages/product/trademark/Trademark"));
const Attr = lazy(() => import("@/pages/product/attr/Attr"));

// 使用最原始读取redux数据的方法,设置显示redux
// const isShow = store.getState().user.isShow;

const load = (Comp: FC) => {
  return (
    // 因为路由懒加载，组件需要一段网络请求时间才能加载并渲染
    // 在组件还未渲染时，fallback就生效，来渲染一个加载进度条效果
    // 当组件渲染完成时，fallback就失效了
    <Suspense fallback={<Loading />}>
      {/* 所有lazy的组件必须包裹Suspense组件，才能实现功能 */}
      <Comp />
    </Suspense>
  );
};

const routes: SRoutes = [
  {
    path: "/",
    auth:false,//false表示都可以进去,true表示必须登录才能进去
    element: <EmptyLayout />,
    children: [
      {
        path: "login",
        element: load(Login),
        auth:false,
      },
    ],
  },
  {
    path: "/admin",
    element: <Layout />,
    auth:false,

    children: [
      {
        path: "/admin/home",
        meta: { icon: <HomeOutlined />, title: <Translation>route:dashboard</Translation> },
        element: load(Dashboard),
        auth:false,
      },
      {
        path: "/admin/product",
        meta: { icon: <AimOutlined />, title: "商品管理" },
        auth:false,
        children:[
          {
            path: "/admin/product/trademark",
            meta: { icon: <HomeOutlined />, title: "品牌管理" },
            element: load(Trademark),
            auth:false,
          },
          {
            path: "/admin/product/attr",
            meta: { icon: <HomeOutlined />, title: "属性管理" },
            element: load(Attr),
            auth:false,
          },
        ]
      }
    ],
  },

  {
    path: "/404",
    element: load(NotFound),
    auth:false,
  },
  {
    path: "*",
    element: <Navigate to="/404" />,
    auth:false,
  },
];

/* 
自定义hook: 注册应用的所有路由
*/
export const useAppRoutes = () => {
  let tok = localStorage.getItem("token")//如果有tok表示已经登录过,把所有的变成可以访问
  let res = []
  if(tok){
    res = routes
  }else{
    res = routes.filter(item=>{return !item.auth})
    //表示可以直接进去的页面
  }
  return useRoutes(res);
  
};

// 找到要渲染成左侧菜单的路由
export const findSideBarRoutes = () => {
  const currentIndex = routes.findIndex((route) => {
    // console.log(route,"routes,index.tsx,75757575")
    // children: Array(1)
    //   0:
    //    element: {$$typeof: Symbol(react.element), type: Symbol(react.suspense), key: null, ref: null, props: {…}, …}
    //    meta: {icon: {…}, title: {…}}
    //    path: "/admin/home"
    //   length: 1
    //   element: {$$typeof: Symbol(react.element), key: null, ref: null, props: {…}, type: ƒ, …}
    //   path: "/admin"
    return route.path === "/admin"
  });
  return routes[currentIndex].children as SRoutes;
};

export default routes;
